<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>活体检测Demo</title>
</head>
<body>
  <h1>活体检测Demo</h1>
  <form id="livenessForm">
    <label for="name">身份证姓名:</label>
    <input type="text" id="name" name="name" required>
    <br>
    <button type="button" onclick="startLivenessDetection()">开始活体检测</button>
  </form>
  <video id="video" width="640" height="480" autoplay></video>
  <canvas id="canvas" width="640" height="480" style="display:none;"></canvas>
  <script>
    function startLivenessDetection() {
      const name = document.getElementById('name').value;
      const video = document.getElementById('video');
      const canvas = document.getElementById('canvas');
      const context = canvas.getContext('2d');

      navigator.mediaDevices.getUserMedia({ video: true })
        .then((stream) => {
          video.srcObject = stream;
          video.play();
          setTimeout(() => {
            context.drawImage(video, 0, 0, 640, 480);
            const imageData = canvas.toDataURL('image/jpeg');
            fetch('/liveness-detection', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({ name, imageData }),
            })
              .then(response => response.json())
              .then(data => {
                alert(`检测结果: ${data.result}`);
              });
          }, 5000); // 5秒后采集视频帧
        })
        .catch((error) => {
          console.error('Error accessing the camera:', error);
        });
    }
  </script>
</body>
</html>